<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="message.css">
</head>

<body>
    <div>
        <h1>留言板</h1>
        <ul>
            
        </ul>
        <textarea placeholder="请编辑您的留言"></textarea>
        <button class="sub">发布</button>
    </div>
    <script>
        var btn = document.querySelector(".sub")
        var txt = document.querySelector("textarea")
        var ul = document.querySelector("ul")

        btn.onclick = function () {
            if (txt.value.length == 0) {
                return;
            }
            //新增
            var t = txt.value
            var li = document.createElement("li")
            li.innerHTML =t
            ul.insertBefore(li,ul.children[0])
            var newBtn =  document.createElement("button")
            newBtn.innerHTML="删除"
            newBtn.className ="remove"
            newBtn.onclick = function()
            {
               ul.removeChild(this.parentNode)
            }
            li.append(newBtn)
            txt.value=""
            //删除
        }

    </script>
</body>

</html>